//(function () {
var namespace = joint.shapes;

var graph = new joint.dia.Graph({}, { cellNamespace: namespace });

var paper = new joint.dia.Paper({
  el: document.getElementById("myholder"),
  model: graph,
  width: 600,
  height: 600,
  gridSize: 5,
  drawGrid: true,
  cellViewNamespace: namespace,
});

paper.on("cell:highlight", function () {
  console.log("highlight triggered!");
});

//rectangle
var rect = new joint.shapes.standard.Rectangle();
rect.position(100, 30);
rect.resize(100, 40);
rect.attr({
  body: {
    fill: "blue",
  },
  label: {
    text: "Rectangle",
    fill: "white",
  },
});
rect.addTo(graph);
var rectView = paper.findViewByModel(rect);
rectView.highlight("label");
//circle
var circle = new joint.shapes.standard.Circle();
circle.resize(100, 100);
circle.position(250, 10);
circle.attr("root/title", "joint.shapes.standard.Circle");
circle.attr("label/text", "Circle");
circle.attr("body/fill", "lightblue");
circle.addTo(graph);

var cylinder = new joint.shapes.standard.Cylinder();
cylinder.resize(100, 200);
cylinder.position(30, 75);
cylinder.attr("root/title", "joint.shapes.standard.Cylinder");
cylinder.attr("body/fill", "lightgray");
cylinder.attr("top/fill", "gray");
cylinder.attr("label/text", "Cylinder");
cylinder.topRy("10%");
cylinder.addTo(graph);

var doubleLink = new joint.shapes.standard.DoubleLink();
doubleLink.prop("source", { x: 300, y: 70 });
doubleLink.prop("target", { x: 450, y: 70 });
doubleLink.prop("vertices", [{ x: 400, y: 70 }]);
doubleLink.attr("root/title", "joint.shapes.standard.DoubleLink");
doubleLink.attr("line/stroke", "#30d0c6");
doubleLink.addTo(graph);
//})(jQuery);
